<!--   @author  Created By  YS  on 2023/10/23 -->
<!--   @describe -->

<template>
  <div class="body">
    <template v-if="pageType == 'getCode'">
      <div class="title-h1">
        修改手机号
      </div>
      <div class="title-h3">
        将向您的绑定手机发送验证码以验证身份
      </div>
      <div class="title-h1">
        138****5678
      </div>
      <view class="input-box margin-button-90">
        <input type="text" value=""  class="input-phone" placeholder="请输入验证码"/>
        <u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
                @change="codeChange"></u-code>
        <span  @click="getCode" class="input-btn">{{ tips }} </span>
      </view>
      <cBtn text="下一步" :customStyle="{marginTop:'50rpx'}" @click="next"></cBtn>
    </template>
    <template v-if="pageType == 'confirm'">
      <div class="title-h1">
        修改手机号
      </div>
      <div class="title-h3">
        将向您的绑定手机发送验证码以验证身份
      </div>
      <view class="input-box margin-button-90">
        <input type="text" :value="phone" @input="phoneChange" @blur="phoneBlur" class="input-phone" placeholder="请输入新手机号"/>

      </view>
<!--      <view class="input-box margin-button-90">-->
<!--        <input type="text" value=""  class="input-phone" placeholder="请再次输入密码"/>-->
<!--      </view>-->
      <view class="input-box margin-button-90">
        <input type="text" value=""  class="input-phone" @input="codeChange" placeholder="请输入验证码"/>
        <u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
                @change="codeChange"></u-code>
        <span  @click="getCode" class="input-btn">{{ tips }} </span>
      </view>
      <cBtn text="下一步" :customStyle="{marginTop:'50rpx'}" @click="finish"></cBtn>
    </template>
    <template v-if="pageType == 'success'">
      <image class="success-img" src="../../static/setting/examine.png"></image>
      <text class="success-text">操作成功</text>
      <cBtn text="确定" @click="confirm"></cBtn>
    </template>
  </div>

</template>

<script>
import cBtn from '../../components/cBtn'
export default {
  name: 'changePhone',
  components:{
    cBtn
  },
  data() {
    return {
      pageType:'confirm',
      seconds: 10,
      tips:'',
      phone:'',
    }
  },
  methods: {
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if(!(/^1[3456789]\d{9}$/.test(this.phone))) {
        uni.$u.toast('请输入正确的手机号');
        return;
      }

      if(this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },
    end() {
      uni.$u.toast('倒计时结束');
    },
    start() {
      uni.$u.toast('倒计时开始');
    },
    next(){
      this.pageType = 'confirm'
    },
    phoneChange(e) {
      this.phone = e.detail.value
    },

    phoneBlur(){
      if(!(/^1[3456789]\d{9}$/.test(this.phone))) {
        uni.$u.toast('请输入正确的手机号');
        return;
      }

    },

    finish(){

    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../assets/css/base.scss';
.body {
  padding-top: 1rpx;
}
.success-img{
  width: 200rpx;
  height: 200rpx;
  margin: 208rpx auto 45rpx;
  display: block;
}
.success-text{
  height: 56rpx;
  opacity: 1;
  color: #333333;
  text-align: center;
  font-size: 40rpx;
  font-weight: 0;
  line-height: 48rpx;
  margin-bottom: 400rpx;
  display: block;
}
</style>
